<template>
    <div class="invitePage">
       <div class="boxPc fixed_auto  hidden-md-and-down">
            <template v-if="current===1">
                <div class="dialogTitie">登录</div>
                <div class="inpVue">
                    <el-input v-model="phone" placeholder="请输入手机号"></el-input>
                </div>    
                <div class="inpVue relative" v-if="isCode">
                    <el-input v-model="code" placeholder="请输入验证码"></el-input>
                    <div class="sendCode absolute_middle" @click="sendCode">{{ text }}</div>
                </div>
                <div class="inpVue" v-else>
                    <el-input type="password" v-model="password" placeholder="请输入登录密码"></el-input>
                </div>
                <div class="flex_between margin20">
                    <span class="code" @click="isCode = !isCode">{{ isCode ? "使用密码登录" : "使用验证码登录" }}</span>
                </div>
                <div class="btn margin20" @click="loginFun">登录</div>
            </template>
            <template v-if="current===2">
                <div class="title text_center">{{userName}}邀请你加入团队成为子账号</div>
                <div class="inner flex_between flex_wrap">
                    <div class="text">
                        <p>1. 智能推荐与交叉销售：基于客户的历史行为和当前查询，AI客服能够智能地推荐相关产品、服务或解决方案，甚至进行交叉销售，提升客户满意度和企业的销售业绩</p>
                    </div>
                    <div class="text">
                        <p>2. 自定义知识库：与传统的培训相比极大的缩短了培训的周期和成本，只需要将需要学习的内容以word形式上传即可立刻更新机器人的表达内容，方便快捷。</p>
                    </div>
                    <div class="text">
                        <p>3. 运营服务更高效：快速响应用户咨询的问题，大幅缩短等待时间，可以同时应答多人的咨询，极大的提升服务效率，降低用户用户流失率。</p>
                    </div>
                    <div class="text">
                        <p>4. 多定向人格：可支持绑定多个业务员、多个客服号，自定义不同的回复习惯、语气、风格、表情等人物特征。</p>
                    </div>
                    <div class="text">
                        <p>5. 多语言能力：AI客服可以轻松支持多种语言，为国际客户提供无缝的服务体验，拓宽企业的市场边界。</p>
                    </div>
                    <div class="text">
                        <p>6. 成本效益：7*24小时不间断服务，长期来看，AI客服能够显著降低人力成本，尤其是在处理大量重复性问题时，减少了对人工客服的依赖。</p>
                    </div>
                </div>
                <div class="btn margin20" @click="joinFun">确认加入</div>
            </template>
        </div>
        <div class="box hidden-lg-and-up">
            <template v-if="current===1">
                <div class="dialogTitie">登录</div>
                <div class="inpVue">
                    <el-input v-model="phone" placeholder="请输入手机号"></el-input>
                </div>    
                <div class="inpVue relative" v-if="isCode">
                    <el-input v-model="code" placeholder="请输入验证码"></el-input>
                    <div class="sendCode absolute_middle" @click="sendCode">{{ text }}</div>
                </div>
                <div class="inpVue" v-else>
                    <el-input type="password" v-model="password" placeholder="请输入登录密码"></el-input>
                </div>
                <div class="flex_between margin20">
                    <span class="code" @click="isCode = !isCode">{{ isCode ? "使用密码登录" : "使用验证码登录" }}</span>
                </div>
                <div class="btn margin20" @click="loginFun">登录</div>
            </template>

            <template v-if="current===2">
                <div class="title text_center">{{userName}}邀请你加入团队成为子账号</div>
                <div class="text">
                    <p>1. 智能推荐与交叉销售：基于客户的历史行为和当前查询，AI客服能够智能地推荐相关产品、服务或解决方案，甚至进行交叉销售，提升客户满意度和企业的销售业绩</p>
                </div>
                <div class="text">
                    <p>2. 自定义知识库：与传统的培训相比极大的缩短了培训的周期和成本，只需要将需要学习的内容以word形式上传即可立刻更新机器人的表达内容，方便快捷。</p>
                </div>
                <div class="text">
                    <p>3. 运营服务更高效：快速响应用户咨询的问题，大幅缩短等待时间，可以同时应答多人的咨询，极大的提升服务效率，降低用户用户流失率。</p>
                </div>
                <div class="text">
                    <p>4. 多定向人格：可支持绑定多个业务员、多个客服号，自定义不同的回复习惯、语气、风格、表情等人物特征。</p>
                </div>
                <div class="text">
                    <p>5. 多语言能力：AI客服可以轻松支持多种语言，为国际客户提供无缝的服务体验，拓宽企业的市场边界。</p>
                </div>
                <div class="text">
                    <p>6. 成本效益：7*24小时不间断服务，长期来看，AI客服能够显著降低人力成本，尤其是在处理大量重复性问题时，减少了对人工客服的依赖。</p>
                </div>
                <div class="btn margin20" @click="joinFun">确认加入</div>
            </template>
            
        </div>
    </div>
</template>


<script>
import { toast } from '@/common/tools'
export default {
    data(){
        return {
            userName: "",
            userId: "",
            current: 1,
            isCode: true,
            phone: "",
            code: "",
            password: "",
            text: "获取验证码",
        }
    },
    created(){
        this.userName = this.$route.query.userName
        this.userId = this.$route.query.userId
    },
    methods: {
        joinFun(){
            this.$post("/front/child/joinTeam", {
                parentId: this.userId
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "加入成功")
                }else{
                    toast(1, res.data.msg)
                }
            })
        },
        // 发送验证码
        async sendCode(){
            if(this.text != '获取验证码') return toast(1, this.text + "后可重新获取")
            if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
            let res = await this.$post("/front/authCode/sendCode", {
                account: this.phone
            })    
            if(res.data.code===0) {
                toast(0, "发送成功")
                let count = 60
                this.text = `${count}s`
                let timer = setInterval(()=>{
                count--;
                this.text = `${count}s`;
                    if (count === 0) {
                        clearInterval(timer);
                        this.text = '获取验证码';
                    }
                }, 1000)
            }else{
                toast(1, res.data.msg)
            }    
        },
        
        //登录
        async loginFun(){
            // if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
            if(!this.isCode && !this.password) return toast(1, "请输入登录密码")
            if(this.isCode && !this.code) return toast(1, "请输入验证码")
            let url = this.isCode ? "/front/login/codeLogin" : "/front/login"
            let data = this.isCode ? {name: this.phone, code: this.code, loginType: "PC"} : {name: this.phone, password: this.password, loginType: "PC"} 
            let res = await this.$post(url, data)
            if(res.data.code===0) {
                console.log(res)
                toast(0, "登录成功")
                window.localStorage.setItem("ai_token", res.data.obj)
                setTimeout(() => {
                    this.$store.dispatch("getUser")
                    this.current = 2
                }, 500);
            }else{
                toast(1, res.data.msg)
            }
        },
    }
}
</script>

<style lang="less" scoped>
.invitePage {
    width: 100vw;
    height: 100vh;
    .box {
        width: 100%;
        padding: 30px;
        .dialogTitie {
            text-align: center;
            color: #000;
            font-size: 18px;
            font-weight: 600; 
            margin-bottom: 50px; 
        }
        .inpVue {
            margin-top: 20px;
            .sendCode {
                right: 15px;
                color: #0147fd;
                cursor: pointer;
            }
        }
        .title {
            color: #111;
            font-weight: 600;
            font-size: 15px;
        }
        .text {
            width: 100%;
            border-radius: 5px;
            background: #FFFFFF;
            box-shadow: 0px 0px 8px 1px rgba(0,35,32,0.13);
            overflow: hidden;
            padding: 10px;
            margin-top: 15px;
            p {
                line-height: 1.4;
            }
        }
        .btn {
            width: 100%;
            height: 40px;
            background: #0147fd;
            border-radius: 4px;
            line-height: 40px;
            text-align: center;
            color: #FFFFFF;
            cursor: pointer;
        }
        .code {
            color: #0147fd;
            cursor: pointer;
            font-size: 13px;
        }
    }
    .boxPc {
        width: 900px;
        border-radius: 5px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 1px rgba(0,35,32,0.13);
        overflow: hidden;
        padding: 30px;
        .title {
            color: #111;
            font-weight: 600;
            font-size: 18px;
        }
        .dialogTitie {
            text-align: center;
            color: #000;
            font-size: 18px;
            font-weight: 600; 
            margin-bottom: 50px; 
        }
        .inpVue {
            margin-top: 20px;
            .sendCode {
                right: 15px;
                color: #0147fd;
                cursor: pointer;
            }
        }
        .code {
            color: #0147fd;
            cursor: pointer;
            font-size: 13px;
        }
        .inner {
            width: 100%;
            margin-top: 30px;
            .text {
                width: 32%;
                height: 140px;
                background: #FFFFFF;
                box-shadow: 0px 0px 8px 1px rgba(0,35,32,0.13);
                padding: 15px;
                margin-bottom: 15px;
                border-radius: 5px;
                p {
                    line-height: 1.4;
                }
            }
            .text:nth-child(2) {
                margin: 0 15px;
            }
            .text:nth-child(5) {
                margin: 0 15px;
            }
        }
       
        .btn {
            width: 520px;
            height: 40px;
            background: #0147fd;
            border-radius: 4px;
            line-height: 40px;
            text-align: center;
            color: #FFFFFF;
            cursor: pointer;
        }
    }
}
</style>